<template>
  <div class="box">
    <!-- <h3>全国投资分布图</h3> -->
    <div id="ransferMap" style="width:50%;height:300px;"></div>
    <div style="width:50%;">
      <el-table
        :data="superList"
        :header-cell-style="patentHeaderStyle"
        height="250px"
        ref="one"
        style="width:100%;border:none;padding:20px;padding-top:0;"
        :row-class-name="tableRowClassName"
        :row-style="{ border: 'none' }"
        :cell-style="{ border: 'none' }"
      >
        <el-table-column prop="companyName" label="名称"> </el-table-column>
        <el-table-column prop="score" label="科研星级">
          <template slot-scope="{ row }">
            <div>
              <i
                :style="{ color: item.color }"
                v-for="(item, index) in setStar(row.score)"
                :key="index"
                :class="item.value"
              ></i>
            </div>
          </template>
        </el-table-column>
        <div slot="empty">{{noData}}</div>
      </el-table>
      <el-pagination
        background
        style="margin:10px auto;width:100%;"
        @current-change="handleChangeSuper"
        layout="prev, pager, next"
        :current-page.sync="ipi"
        :page-size="ips"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import cityMap from "@/utils/mock/MapJs/china-main-city-map";
import resize from "@/utils/resize";
export default {
  mixins: [resize],
  data() {
    return {
      companyName: this.$route.query.name || "",
      chart: null,
      mapName: "",
      data: [],
      dataCopy: [],
      org: 0,
      superList: [],
      mapData: [],
      total: 0,
      ipi: 1,
      ips: 4,
      noData: ''
    };
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  mounted() {
    this.chart = this.$echarts.init(document.getElementById("ransferMap"));
    this.chart.on("click", this.mapClick);
    this.init();
  },
  methods: {
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2) {
        return "warning-row";
      }
      return "";
    },
    patentHeaderStyle: function() {
      return "font-weight: 600;color:#4e4e56;";
    },
    mapClick(val) {
      if (val.data) {
        this.ipi = 1;
        let code = val.data.code;
        let mapData = this.mapData;
        if (this.mapName == val.data.name) {
          this.org = 0;
          this.listSplice(this.data);
          this.mapData.forEach((e, index) => {
            this.$set(mapData[index], "value", "100");
          });
        } else {
          this.org = 1;
          this.dataCopy = [];
          this.data.forEach(i => {
            // 收集点击省的所有公司
            if (i.code === code) {
              this.dataCopy.push(i);
            }
          });
          this.listSplice(this.dataCopy);
          // 把地图变颜色
          this.mapData.forEach((e, index) => {
            if (e.name == val.data.name) {
              this.$set(mapData[index], "value", "80");
            } else {
              this.$set(mapData[index], "value", "100");
            }
          });
        }
        this.getChart(mapData);
        this.mapName = val.data.name; // 记录一下
      }
    },
    // 翻页
    handleChangeSuper(val) {
      this.ipi = val;
      if (this.org === 0) {
        this.listSplice(this.data);
      } else {
        this.listSplice(this.dataCopy);
      }
    },
    listSplice(data) {
      this.total = data.length;
      this.superList = data.slice(
        (this.ipi - 1) * this.ips,
        this.ipi * this.ips
      );
    },
    setStar(data) {
      var arr = [];
      for (var i = 1; i < 4; i++) {
        let color = "";
        if (data < 34) {
          if (i === 1) {
            color = "#504aac";
          } else {
            color = "#aeadad";
          }
        } else if (data < 67 && data > 33) {
          if (i < 3) {
            color = "#504aac";
          } else {
            color = "#aeadad";
          }
        } else {
          color = "orange";
        }
        arr.push({
          index: i,
          value: "el-icon-star-on",
          color: color
        });
      }
      return arr;
    },
    init() {
      this.noData = '数据加载中...'
      this.$post(this.$Url.company.branch, {
        companyName: this.companyName
      })
        .then(res => {
          if (res.data) {
            let data = res.data;
            data.forEach(i => {
              if (i.eid) {
                this.data.push(i);
              }
            });
            if (data.length && data.length > 0) {
              this.total = data.length;
              this.listSplice(this.data);
              let codeArr = [];
              let mapData = [];
              this.data.forEach(i => {
                if (i.code) codeArr.push(i.code);
              });
              codeArr = [...new Set(codeArr)];
              codeArr.forEach(e => {
                for (let i in cityMap) {
                  if (e == cityMap[i]) {
                    mapData.push({ name: i, value: 100, code: e });
                  }
                }
              });
              this.mapData = mapData;
              this.getChart(mapData);
            } else {
              this.getChart([])
              this.noData = '暂无数据'
            }
          } else {
            this.noData = '暂无数据'
          }
        })
        .catch(e => {
          console.log(e);
        });
    },
    getChart(mapData) {
      const province = require("@/utils/mock/map/json/china.json");
      this.$echarts.registerMap("china", province);
      this.registerAndsetOption(mapData);
    },
    registerAndsetOption(mapData) {
      let option = {
        title: {
          show: false
        },
        tooltip: {
          trigger: "item",
          formatter: function(val) {
            /* let str =''
                        if(val.data){
                            str = val.name + val.data.value
                        }else{
                            str = val.name
                        } */
            return val.name;
          }
        },
        legend: {
          orient: "vertical",
          show: false,
          top: "bottom",
          left: "right",
          // data:['迁入','迁出'],
          textStyle: {
            color: "#fff"
          },
          selectedMode: "single"
        },
        visualMap: {
          show: false,
          min: 0,
          max: 200,
          left: "10%",
          top: "bottom",
          // showLabel: !0,
          pieces: [
            {
              gt: 99,
              label: "",
              // color: "#d6d8ff"
              // color: '#504da5'
              color: 'rgba(80,77,165,0.7)'
            },
            {
              gte: 10,
              lte: 90,
              label: "",
              color: "#514bab"
            }
          ]
          // show: true
        },
        geo: {
          map: "china",
          label: {
            normal: {
              show: false,
              fontSize: "14",
              color: "#fff"
            },
            emphasis: {
              show: false
            }
          },
          zoom: 1,
          roam: false,
          itemStyle: {
            normal: {
              color: "#fff",
              areaColor: "#eceff4",
              borderColor: "#ddd",
              borderWidth: "1"
            },
            emphasis: {
              // areaColor: "#d6d8ff" // 悬停板块的颜色
              // areaColor: '#504da5'
              areaColor: 'rgba(80,77,165,0.7)'
            }
          }
        },
        series: [
          {
            name: "",
            type: "map",
            geoIndex: 0,
            data: mapData
            /* label:{
                            color:'#fff',
                            show:true
                        },
                        itemStyle:{
                            color:"#fff"
                        } */
          }
        ]
      };
      this.chart.setOption(option, true);
    }
  }
};
</script>
<style lang="scss" scoped>
.box {
  width: 100%;
  background: #fff;
  border-radius: 2px;
  overflow: hidden;
  h3 {
    text-align: left;
    line-height: 50px;
    border-bottom: 1px solid #ddd;
    padding-left: 20px;
  }
  div {
    float: left;
  }
}
</style>